<template>
  <div>
    <!-- 在模板中如何接收子组件传过来的事件数据呢？可以通过 $event 这个特殊的关键字接收子组件传递过来的事件数据 -->
    <!-- <Counter :count="count" @changeCount="count = $event" /> -->
    <!-- 
      可以是可以用 .sync 来简化，但是，想要用 .sync 必须满足几个前提条件：
        1. （子组件来满足） 子组件触发的自定义事件名称必须是以 “ update:属性名 ” 这种格式
        2. （父组件来满足） 父组件监听事件的处理函数的执行逻辑，必须是单纯的将 子组件传过来的事件数据 赋值给 父组件绑定那个的数据变量，形如：“数据名 = $event”
     -->
    <!-- <Counter :count.sync="count" /> -->

    <!-- 
      .sync 修饰符是什么组合？ v-bind:属性名 和 v-on:update:属性名 的组合 
        ==> 自定义的组件如何支持呢？ 
        ==> 在 props 中定义一个属性名，在用 $emit 触发事件时，使用 update:属性名 作为事件名 
    -->
    <!--
      注意：不是所有组件都能写 v-model 的，需要该组件自己去支持，在父组件使用该组件时才可以。
      v-model 就是 v-bind:value 和 v-on:input 的组合   
        ==> 自定义组件如何支持呢？
        ==> 在 props 中定义一个 value，在用 $emit 触发事件时，使用 input 作为事件名
    -->
    <Counter v-model="count" />
  </div>
</template>

<script>
import Counter from './components/Counter'

export default {
  name: 'QAPage',
  components: {
    Counter,
  },
  data() {
    return {
      count: 10,
    }
  },
  methods: {
    // 在函数中可以通过第一个形参接收子组件传过来的事件数据
    // changeCount(data) {
    //   this.count = data
    // },
  },
}
</script>
